import React, { Component } from "react"
import { Descriptions, Tooltip, InputNumber, Modal, Switch } from 'antd';
import { QuestionCircleOutlined } from "@ant-design/icons";
import TheButton from '@/components/TheButton';
import { apiPetCoinRechargeConfig, apiPetCoinRechargeConfigEdit } from '@/request/wallet/rechargeWithdraw'
import EditInput from "./editInput";
import { camelCase } from "lodash";

// 入口文案label
let entryCopyLabel = (<div>
  <text style={{ marginRight: 10 }}>入口维护文案</text>
  <Tooltip placement="top" title={() => { return '入口关闭时展示维护文案' }}  >
    <QuestionCircleOutlined style={{ fontSize: '16px' }} />
  </Tooltip></div>)
// 入口开关label
let entrySwitchLabel = (<div>
  <text style={{ marginRight: 10 }}>入口开关</text>
  <Tooltip placement="top" title={() => { return '关闭时,APP点击充值会展示维护文案' }}  >
    <QuestionCircleOutlined style={{ fontSize: '16px' }} />
  </Tooltip></div>)
export default class Recharge extends Component {
  constructor() {
    super()
    this.state = {
      petCoinRechargeConfigId: "",
      proportion: '', //赠送比例
      switchValue: 0,//开关
      imAmountConfigId: '',//业务id
      obj: {},
      doorsill: 0,//最低起赠门槛
      sales: "",//促销文案
      limitationType: '', //其他充值配置参数
      otherMinute: '', //其他时间
      isOtherEdit: false,// 是否点击其他充值时的编辑，
      doorsillFlag: false,// 是否最低起赠门槛的编辑，
      salesFlag: false,// 是否促销文案的编辑，
      oldValue: '',//旧数据输入框
      switchLoading: false,//开关
      warning: false,
      otherMinuteWarning: false,//是否填写值修改颜色
      otherCountWarning: false,//是否填写值修改颜色
      otherMinuteOldValue: '',//其他配置项输入的值
      otherCountOldValue: '',//其他配置项输入的值
      editType: '',//提现充值类型
    }
  }
  componentDidMount() {
    this.getData()
  }
  // 获取数据
  getData = async () => {
    let res = await apiPetCoinRechargeConfig()
    if (res.code === 0 && res.data) {
      let data = res.data
      this.setState({
        petCoinRechargeConfigId: data.petCoinRechargeConfigId,
        switchValue: data.configState == "Y",
        proportion: data.giftRatio,
        doorsill: data.giftThreshold / 100,
        sales: data.giftText
      })
    }
  };
  // 编辑 
  edit = (data) => {
    let { obj, otherMinuteOldValue, otherCountOldValue, oldValue } = this.state
    Object.values(obj).map((v, i) => {
      if (data.index === i) {
        oldValue = v.value
        return v.status = 1
      } else {
        this.state.isOtherEdit = false
        return v.status = 0
      }
    })
    this.setState({
      obj,
      oldValue,
      warning: false,
      otherCount: otherCountOldValue,
      otherMinute: otherMinuteOldValue
    })
  }
  // 取消
  cancel = (data) => {
    let { obj } = this.state
    Object.values(obj).map((v, i) => {
      if (data.index === i) {
        v.status = 0
        return v
      }

    })
    this.setState({
      obj,
      warning: false
    })
  }
  // 保存时掉接口
  saveFn = async (params, v) => {
    let res = await apiPetCoinRechargeConfigEdit({
      imAmountConfigId: this.state.imAmountConfigId, [v.key]: v.precision === 0 ? params.data.value : React.$transNum(params.data.value, 0, 2)
    })
    if (res.code === 0) {
      v.status = 0
      v.value = params.data.value
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
      return v
    }
  }
  // 保存
  save = (params) => {
    let { obj } = this.state
    let numValues = Number(params.data.value)
    Object.values(obj).map(async (v, i) => {
      if (params.index === i) {
        if (params.data.key === 'minimumAmount' && numValues >= Number(obj.maximumAmount.value)) {
          Modal.error({
            content: '单次最低金额不能大于或等于单次最高金额',
            okText: '确定'
          });
          return false
        }
        if (params.data.key === 'maximumAmount') {
          if (numValues <= Number(obj.minimumAmount.value)) {
            Modal.error({
              content: '单次最高金额不能小于或等于单次最低金额',
              okText: '确定'
            });
          } else if (numValues > Number(obj.dayAmount.value)) {
            Modal.error({
              content: '单次充值最高金额不能大于单日充值总额度',
              okText: '确定'
            });
          } else {
            this.saveFn(params, v)
          }
          return false
        }
        if (params.data.key === 'dayAmount' && numValues < Number(obj.maximumAmount.value)) {
          Modal.error({
            content: '单日充值总额度不能小于单次充值最高金额',
            okText: '确定'
          });
          return false
        }
        this.saveFn(params, v)
      }
    })
  }
  // 开关设置
  switchChange = async (e) => {
    let res = await apiPetCoinRechargeConfigEdit({
      "petCoinRechargeConfigId": this.state.petCoinRechargeConfigId,
      configState: e ? "Y" : "N"
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
    }
  }
  //其他充值配置编辑
  editOtherRecharge = () => {
    this.setState({
      isOtherEdit: true,
    })
  }
  //最低起赠门槛编辑
  editDoorsill = () => {
    this.setState({
      doorsillFlag: true,
    })
  }
  //促销文案编辑
  editSales = () => {
    this.setState({
      salesFlag: true,
    })
  }
  // 取消编辑其他配置 
  cancelOtherRecharge = () => {
    this.getData()
    this.setState({
      isOtherEdit: false,
    })
  }
  // 取消编辑最低起赠门槛
  cancelDoorsill = () => {
    this.getData()
    this.setState({
      doorsillFlag: false,
    })
  }
  // 取消编辑促销文案
  cancelSales = () => {
    this.getData()
    this.setState({
      salesFlag: false,
    })
  }
  // 保存编辑其他配置 
  saveDoorsill = async () => {
    let res = await apiPetCoinRechargeConfigEdit({
      "petCoinRechargeConfigId": this.state.petCoinRechargeConfigId,
      giftThreshold: this.state.doorsill * 100
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
      this.setState({
        doorsillFlag: false
      })
    }
  }
  // 保存编辑其他配置 
  saveSales = async () => {
    let res = await apiPetCoinRechargeConfigEdit({
      "petCoinRechargeConfigId": this.state.petCoinRechargeConfigId,
      giftText: this.state.sales
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
      this.setState({
        salesFlag: false
      })
    }
  }
  // 保存编辑其他配置 
  saveOtherRecharge = async () => {
    let res = await apiPetCoinRechargeConfigEdit({
      "petCoinRechargeConfigId": this.state.petCoinRechargeConfigId,
      giftRatio: this.state.proportion
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
      this.setState({
        isOtherEdit: false
      })
    }
  }
  //赠送比例
  doorsillChange = (doorsill) => {
    this.setState({
      doorsill
    })
  }
  //赠送比例
  salesChange = (sales) => {
    this.setState({
      sales: sales.target.value
    })
  }
  //其他配置中时间值改变
  proportionChange = (proportion) => {
    this.setState({
      proportion
    })
  }
  render() {
    const { doorsillFlag, doorsill, proportion, isOtherEdit, switchLoading, salesFlag, otherCountWarning, switchValue, sales } = this.state
    let style = { display: 'flex', justifyContent: 'center', alignItems: 'center' }
    return (
      <div >
        <div style={{ margin: '20px 0' }}>宠币充值促销
          <Switch style={{ margin: 'auto', marginLeft: '20px' }} checked={switchValue} onChange={(e) => this.switchChange(e)} loading={switchLoading} />
          <span style={{ color: 'grey', marginLeft: '20px', fontSize: '12px' }}>仅对安卓和H5充值有效</span>
        </div>
        <div style={{ marginLeft: '120px' }}>
          {isOtherEdit ? <div>
            赠送比例:<InputNumber precision={0} style={{ width: 150, paddingLeft: 5 }} maxLength={5} onChange={this.proportionChange} value={proportion} />%
            <TheButton haspermi={["wallet:depositSettings:edit"]} onClick={() => this.cancelOtherRecharge()}>取消</TheButton>
            <TheButton haspermi={["wallet:depositSettings:edit"]} onClick={() => this.saveOtherRecharge()}>保存</TheButton>
          </div> : <div> <text> 赠送比例:{proportion} %</text><TheButton haspermi={["wallet:depositSettings:edit"]} onClick={this.editOtherRecharge}>编辑</TheButton></div>}
          <div style={{ color: 'grey', fontSize: '12px' }}>例如：设置10%，用户购买6元，可获得66个宠币，其中6个为平台赠送</div>
          {doorsillFlag ? <div>
            最低起赠门槛：满<InputNumber precision={0} style={{ width: 150, paddingLeft: 5 }} maxLength={5} onChange={this.doorsillChange} value={doorsill} />元，可参与促销赠送活动
            <TheButton haspermi={["wallet:depositSettings:doorsill"]} onClick={() => this.cancelDoorsill()}>取消</TheButton>
            <TheButton haspermi={["wallet:depositSettings:doorsill"]} onClick={() => this.saveDoorsill()}>保存</TheButton>
          </div> : <div> <text> 最低起赠门槛：满{doorsill} 元，可参与促销赠送活动</text><TheButton haspermi={["wallet:depositSettings:doorsill"]} onClick={this.editDoorsill}>编辑</TheButton></div>}
          {salesFlag ? <div>
            促销文案：<input style={{ width: 500, paddingLeft: 5 }} maxLength={20} onChange={this.salesChange} value={sales} />
            <TheButton haspermi={["wallet:depositSettings:sales"]} onClick={() => this.cancelSales()}>取消</TheButton>
            <TheButton haspermi={["wallet:depositSettings:sales"]} onClick={() => this.saveSales()}>保存</TheButton>
          </div> : <div> <text> 促销文案：{sales} </text><TheButton haspermi={["wallet:depositSettings:sales"]} onClick={this.editSales}>编辑</TheButton></div>}
        </div>
      </div>
    )
  }
}